<template>
  <div class="wallentlist-wrapper">
      <BaseFilter class="base-filter" :config="filterOptions" @mychange="setFilterData" />
      <div class="data-list">
        <el-card class="data-item" v-for="data in allData" :key="data.key">
            <h5>{{data.label}}</h5>
            <span>{{data.value}}</span>
        </el-card>
      </div>
      <div class="table-wrapper">
          <el-tabs v-model="tabKey">
            <el-tab-pane label="大客户" name="first">
                <BaseTable :columns="tableColumns" :tableData="getTableData()">
                    <template #header>
                        <div class="header-btn">
                            <el-button type="primary" @click="exportXLSXFile()">导出excel</el-button>
                            <el-button type="primary">查询</el-button>
                            <el-button type="primary">重置</el-button>
                        </div>
                    </template>
                </BaseTable>
            </el-tab-pane>
            <el-tab-pane label="合伙人" name="second">
                <BaseTable :columns="tableColumns" :tableData="getTableData()">
                    <template #header>
                        <div class="header-btn">
                            <el-button type="primary" @click="exportXLSXFile()">导出excel</el-button>
                            <el-button type="primary">查询</el-button>
                            <el-button type="primary">重置</el-button>
                        </div>
                    </template>
                </BaseTable>
            </el-tab-pane>
        </el-tabs>
        
      </div>
      <el-dialog title="钱包明细" v-model="dialogTableVisible" class="walent-dialog" width="800px">
        <BaseFilter :config="dialogFilterConfig" @mychange="setDialogFilter" />
        <el-card class="data-item" style="margin-top: 20px;">
            <h5>总金额</h5>
            <span>1000元</span>
        </el-card>
         <BaseTable :columns="dialogTableColumns" :tableData="dialogTableData" class="dialog-table">
            <template #header>
                <div class="header-btn">
                    <el-button type="primary" @click="exportXLSXFile()">导出excel</el-button>
                    <el-button type="primary">查询</el-button>
                    <el-button type="primary">重置</el-button>
                </div>
            </template>
        </BaseTable>
    </el-dialog>
  </div>
</template>

<script>
import BaseFilter from "@/components/BaseFilter.vue";
import BaseTable from "@/components/BaseTable.vue";
import { getAgentSum, getPartnerSum, getWalletInfo } from "@/api/wallent";
import XLSX from "xlsx";
export default {
    name: "bigcustomerorderlist",
    components: {
        BaseFilter,
        BaseTable
    },
    data(){
        return {
            date: null,
            filterOptions: [
                {
                    label: "姓名",
                    key: "name",
                    type: "text",
                    props: {
                        placeholder: "姓名"
                    },
                }
            ],
            filterData: {},
            tableColumns: [
                {
                    title: "ID",
                    key: "id",
                },
                {
                    title: "姓名",
                    key: "name",
                },
                {
                    title: "手机号",
                    key: "phone",
                },
                {
                    title: "代理区域",
                    key: "province",
                },
                {
                    title: "管理津贴",
                    key: "manaBounus",
                },
                {
                    title: "提现金额",
                    key: "soldBounus",
                },
                {
                    title: "销售奖励",
                    key: "cash",
                },
                {
                    title: "总金额",
                    key: "allcount",
                },
                {
                    title: "操作",
                    key: "operate",
                    operate: [{
                        tag: "el-button",
                        text: "钱包明细",
                        click: (index, row) => {
                            this.getWalletInfo(row.name);
                            this.dialogTableVisible = true;
                        }
                    }]
                }
            ],
            tableData: [],
            allData: [{
                label: "总金额",
                key: "allcount",
                value: 0
            }, {
                label: "总销售额",
                key: "allcash",
                value: 0
            }, {
                label: "总管理津贴",
                key: "allmanaBounus",
                value: 0
            }, {
                label: "总提现金额",
                key: "allsoldBounus",
                value: 0
            }],
            tabKey: "first",
            dialogTableVisible: false,
            dialogFilterConfig: [
                {
                    label: "收支类型",
                    key: "inOutInfo",
                    type: "text",
                    props: {
                        placeholder: "收支类型"
                    },
                },
                {
                    label: "收支日期",
                    key: "inOutDate",
                    type: "datepicker",
                    props: {
                        type: "daterange",
                        startPlaceholder: "开始日期",
                        endPlaceholder: "结束日期"
                    },
                }
            ],
            dialogFilter: {},
            dialogTableColumns: [
                {
                    title: "ID",
                    key: "id"
                },
                {
                    title: "姓名",
                    key: "contactsName"
                },
                {
                    title: "电话",
                    key: "phone"
                },
                {
                    title: "金额",
                    key: "figure"
                },
                {
                    title: "收入支出",
                    key: "inOrOut"
                },
                {
                    title: "收支类型",
                    key: "inOutInfo"
                },
                {
                    title: "收支时间",
                    key: "inOutDate"
                },
            ],
            dialogTableData: []
        }
    },
    methods: {
        setFilterData(values){
            this.filterData = values;
        },  
        getAgentSum(){
            getAgentSum().then(res => {
                if(res.code === 200){
                    let allcount = 0;
                    let allcash = 0;
                    let allmanaBounus = 0;
                    let allsoldBounus = 0;
                    this.tableData = (res.res || []).map((item, index) => {
                        allcount += item.allcount || 0;
                        allcash += item.cash || 0;
                        allmanaBounus += item.manaBounus || 0;
                        allsoldBounus += item.soldBounus || 0;
                        return {
                            ...item,
                            id: index
                        }
                    });
                    const allDataMap = {
                        allcount,
                        allcash,
                        allmanaBounus,
                        allsoldBounus
                    }
                    this.allData = this.allData.map(item => {
                        return {
                            ...item,
                            value: allDataMap[item.key]
                        }
                    })
                    return
                }
                this.$message.error("加载数据失败");
            }).catch(err => {
                this.$message.error("加载数据失败");
            })
        },
        getPartnerSum(){
            getPartnerSum().then(res => {
                if(res.code === 200){
                    let allcount = 0;
                    let allcash = 0;
                    let allmanaBounus = 0;
                    let allsoldBounus = 0;
                    this.tableData = (res.msg || []).map((item, index) => {
                        allcount += item.allcount || 0;
                        allcash += item.cash || 0;
                        allmanaBounus += item.manaBounus || 0;
                        allsoldBounus += item.soldBounus || 0;
                        return {
                            ...item,
                            id: index
                        }
                    });
                    const allDataMap = {
                        allcount,
                        allcash,
                        allmanaBounus,
                        allsoldBounus
                    }
                    this.allData = this.allData.map(item => {
                        return {
                            ...item,
                            value: allDataMap[item.key]
                        }
                    })
                    return
                }
                this.$message.error("加载数据失败");
            }).catch(err => {
                this.$message.error("加载数据失败");
            })
        },
        getTableData(){
            const { name } = this.filterData;
            let data = this.tableData;
            if(name){
                data = data.filter(item => item.name?.includes(name))
            }
            return data;
        },
        exportXLSXFile() {
            if(this.tableData.length == 0) {
                this.$message.warn("当前数据列表为空");
                return
            }
            const head = this.tableColumns.map(item => {
                return item.title;
            })
            const data = this.tableData.map(item => {
                return this.tableColumns.map(fi => {
                    return item?.[fi.key];
                })
            })
            const ws_name = "Sheet1";
            const wb = XLSX.utils.book_new();
            const ws = XLSX.utils.aoa_to_sheet([head, ...data]);
            XLSX.utils.book_append_sheet(wb, ws, ws_name);
            XLSX.writeFile(wb, "钱包数据.xlsx");
        },
        setDialogFilter(values){
            this.dialogFilter = values;
        },
        getWalletInfo(name){
            getWalletInfo(name).then(res => {
                if(res.code == 200){
                    this.dialogTableData = res.data || [];
                    return
                }
                this.$message.error("加载数据失败")
            }).catch(err => {
                this.$message.error("加载数据失败")
            })
        }
    },
    watch: {
        tabKey: {
            handler(){
                if(this.tabKey === "first"){
                    this.getAgentSum();
                }else{
                    this.getPartnerSum();
                }
            },
            immediate: true
        }
    }
}
</script>

<style lang="scss">
.wallentlist-wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #FFF;
    padding: 16px 24px;
    box-sizing: border-box;
    .table-wrapper {
        margin-top: 20px;
    }
    .data-list {
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
        .data-item {
            flex: 1;
            margin-right: 20px;
            &:last-child {
                margin-right: 0;
            }
        }
    }
}
.dialog-table {
    margin-top: 20px;
}
</style>